<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-table :data="listData.list" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
        <el-table-column label="编号" prop="id" min-width="130"/>
        <el-table-column label="标题" prop="title" min-width="130"/>
        <el-table-column label="更新时间" prop="updateTime" min-width="130"/>
        <el-table-column label="操作" min-width="180" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" size="mini" type="primary" @click="openEdit(scope.row.id)"  v-has-permi="['admin:user:agreement']">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
        :visible.sync="editDialog.show"
        :title="editDialog.id? '编辑':'新增'"
        destroy-on-close
        :close-on-click-modal="false"
        width="1200px">
      <edit
          v-if="editDialog.show"
          :id="editDialog.id"
          @hideEditDialog="hideEditDialog"
          ref="editForm"
      />
    </el-dialog>
  </div>
</template>

<script>
import edit from './edit.vue'
import {list} from "@/api/article";
import {checkPermi} from "@/utils/permission";

export default {
  components: { edit },
  data() {
    return {
      listData: { list: [],count:0 },
      listPram: {
        page: 1,
        limit: 20,
      },
      editDialog:{
        show:false,
        id:null
      },
      tableLoading:false,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    checkPermi,
    getList(){
      this.tableLoading=true
      list(this.listPram).then(res=>{
        this.listData.list=res.articleList;
      }).finally(()=>{})
      this.tableLoading=false;
    },
    openEdit(id=null){
      this.editDialog.id=id;
      this.editDialog.show=true
    },
    hideEditDialog() {
      this.editDialog.show = false
      this.getList()
    },
  }
}
</script>

<style scoped lang="scss">

</style>
